<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="400"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    /**
     * Helper function to draw a line with a filled arrowhead.
     * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
     * @param {number} x1 - The x-coordinate of the starting point.
     * @param {number} y1 - The y-coordinate of the starting point.
     * @param {number} x2 - The x-coordinate of the ending point.
     * @param {number} y2 - The y-coordinate of the ending point.
     * @param {number} [headlen=12] - The length of the arrowhead sides.
     */
    function drawLineWithArrow(ctx, x1, y1, x2, y2, headlen = 12) {
        // Draw the line
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
        
        // Draw the arrowhead
        const angle = Math.atan2(y2 - y1, x2 - x1);
        ctx.beginPath();
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 7), y2 - headlen * Math.sin(angle - Math.PI / 7));
        ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 7), y2 - headlen * Math.sin(angle + Math.PI / 7));
        ctx.closePath();
        ctx.fill();
    }
    
    // --- Canvas Setup ---
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;

    // --- Draw Road ---
    const roadY = 120;
    const roadStartX = 50;
    const roadEndX = 550;
    ctx.beginPath();
    ctx.moveTo(roadStartX, roadY);
    ctx.lineTo(roadEndX, roadY);
    ctx.stroke();

    // --- Draw Direction Labels ---
    ctx.font = "28px sans-serif";
    ctx.fillText("西", roadStartX - 45, roadY + 10);
    ctx.fillText("东", roadEndX + 10, roadY + 10);

    // --- Draw Car B ---
    const carX = 400;
    const carY = 120; // y-coordinate of the bottom of the wheels
    const carWidth = 60;
    const carHeight = 25;
    ctx.beginPath();
    ctx.rect(carX, carY - carHeight, carWidth, carHeight);
    ctx.stroke();
    // Wheels
    const wheelRadius = 4;
    ctx.beginPath();
    ctx.arc(carX + 12, carY, wheelRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(carX + carWidth - 12, carY, wheelRadius, 0, 2 * Math.PI);
    ctx.fill();

    // --- Draw Labels B and v ---
    ctx.font = "italic bold 24px 'Times New Roman'";
    ctx.fillText("B", carX + carWidth / 2 - 8, carY - carHeight - 10);
    ctx.font = "italic 24px 'Times New Roman'";
    ctx.fillText("v", carX - 60, carY - carHeight);

    // --- Draw Velocity Arrow ---
    ctx.lineWidth = 2;
    drawLineWithArrow(ctx, carX - 15, carY - carHeight/2, carX - 75, carY - carHeight/2, 14);
    ctx.lineWidth = 1.5;

    // --- Define H position ---
    const hLineX = 280;
    const hPointY = roadY + 150;
    const hPoint = { x: hLineX, y: hPointY };

    // --- Draw House H ---
    ctx.beginPath();
    ctx.arc(hPoint.x, hPoint.y, 5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.font = "italic bold 24px 'Times New Roman'";
    ctx.fillText("H", hPoint.x + 15, hPoint.y + 8);
    
    // --- Draw Distance Line L ---
    ctx.beginPath();
    ctx.setLineDash([6, 4]);
    ctx.moveTo(hPoint.x, roadY);
    ctx.lineTo(hPoint.x, hPoint.y);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // Label L
    ctx.font = "italic 24px 'Times New Roman'";
    ctx.fillText("L", hPoint.x + 15, roadY + (hPoint.y - roadY)/2 + 8);
    
    // --- Draw Incoming Wave ---
    const waveStartX = hPoint.x - 180;
    const waveStartY = hPoint.y + 120;
    
    ctx.lineWidth = 2;
    // Calculate the end point of the line to avoid overlapping the H dot
    const dx = hPoint.x - waveStartX;
    const dy = hPoint.y - waveStartY;
    const dist = Math.sqrt(dx*dx + dy*dy);
    const ratio = 5 / dist; // 5 is the radius of the H dot
    const lineEndX = hPoint.x - dx * ratio;
    const lineEndY = hPoint.y - dy * ratio;

    drawLineWithArrow(ctx, waveStartX, waveStartY, lineEndX, lineEndY, 15);

</script>
</body>
</html>